<!--    引入layui -->
<link href="../../assets/layui-v2.5.6/css/layui.css" rel="stylesheet">
<script src="../../assets/layui-v2.5.6/layui.all.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
    .layui-form-label {
        width: 85px
    }

    .layui-input-block {
        margin-left: 115px;
    }
</style>
<div style="margin: 20px;" id="poet_detail">
    <form class="layui-form" action="" lay-filter="add_form">

        <div class="layui-form-item">
            <label class="layui-form-label">诗名</label>
            <div class="layui-input-block">
                <input type="text" name="poemTitle" placeholder=""
                       autocomplete="off"
                       class="layui-input" value='#(poem.get("poem_title"))'>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">朝代</label>
                <div class="layui-input-inline">
                    <input type="text" name="creationDynasty" placeholder="" autocomplete="off"
                           class="layui-input" value='#(poem.get("creation_dynasty"))'>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">作者</label>
                <div class="layui-input-inline" id="poet">
                    <!--                    <input type="text" name="poetId" placeholder=""-->
                    <!--                           autocomplete="off"-->
                    <!--                           class="layui-input" value='#(poem.get("poet_id"))'>-->
                    <select id="poetSelect" name="poetId" lay-verify="poet" lay-search>
                        <option value='#(poem.get("poet_id"))' selected>#(poem.get("poet_name"))</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">创作时间</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="poemYear" placeholder="年"
                           autocomplete="off"
                           class="layui-input" value='#(poem.get("poem_year"))'>
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="poemMonth" placeholder="月" autocomplete="off" class="layui-input"
                           value='#(poem.get("poem_month"))'>
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="poemDay" placeholder="日" autocomplete="off" class="layui-input"
                           value='#(poem.get("poem_day"))'>
                </div>
            </div>

        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">创作地点</label>
            <div class="layui-input-block">
                <input type="text" name="creationPlace" placeholder=""
                       autocomplete="off"
                       class="layui-input" value='#(poem.get("creation_place"))'>
            </div>
        </div>


        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">诗词原文</label>
            <div class="layui-input-block">
                <textarea name="poemContent" placeholder="请输入内容"
                          class="layui-textarea">#(poem.get("poem_content"))</textarea>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">白话译文</label>
            <div class="layui-input-block">
                <textarea name="translation" placeholder="请输入内容"
                          class="layui-textarea">#(poem.get("translation"))</textarea>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">创作背景</label>
            <div class="layui-input-block">
                <textarea name="background" placeholder="请输入内容"
                          class="layui-textarea">#(poem.get("background"))</textarea>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">赏析</label>
            <div class="layui-input-block">
                <textarea name="appreciation" placeholder="请输入内容"
                          class="layui-textarea">#(poem.get("appreciation"))</textarea>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">注释</label>
            <div class="layui-input-block">
                <textarea name="notes" placeholder="请输入内容" class="layui-textarea">#(poem.get("notes"))</textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block" style="display: flex">
                <div style="display: inline-block;flex: 1"></div>
                <button class="layui-btn" type="button" onclick="update()">保存</button>
                <div style="display: inline-block;flex: 1"></div>
            </div>
        </div>
    </form>

</div>
<script>
    let form = layui.form;
    form.render(); //更新全部
    //更新提交
    function update() {
        let param = form.val("add_form");
        param.id = '#(poem.get("id"))';
        $.post("/dataManagement/poem/update", param, function (data) {
            if (data.code == 0) {
                let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
                parent.layer.msg(data.msg, {time: 2000});
                //刷新表格
                parent.reload();
            } else {
                layer.msg(data.msg);
            }
        });
    }

    //诗人下拉搜索
    $("#poet").find("input").keyup(() => {
        let param = {name: $("#poet").find("input").val()};
        $.post("/dataManagement/poem/poet", param, function (res) {
            if (res.code == 0) {
                $("#poet").find("dl").empty();
                $("#poetSelect").empty();
                for (let option of res.data) {
                    $("#poet").find("dl").append(' <dd lay-value="' + option.id + '" >' + option.name + '</dd>');
                    $("#poetSelect").append('<option value="' + option.id + '">' + option.name + '</option>');
                }
            } else {
                layer.msg(data.msg);
            }
        });
    })


</script>